
import React, { useState } from 'react';
import { Button } from 'antd';
import { Input } from 'antd';
import { Select } from 'antd';
// import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import {
  useParams,
  useNavigate,
  useLocation,
} from "react-router-dom";

import "./Login.css"

export default function Login() {
  const { Option } = Select;

  const [size, setSize] = useState('large');

  // 实例化路由
  let navigate = useNavigate();
  
  let handleChange = (value) => {
    console.log(`selected ${value}`);
  }

  let loginHandle = () => {
    navigate("/layout");

  }
  return (
    <div className='login'>

      {/* 测试  ant design  */}
      {/* <Button type="primary">Button</Button> */}

      <div className="left-area">

      </div>



      <div className="right-area">

        <div className='big-titile'>
          <img src="https://anima-uploads.s3.amazonaws.com/projects/627c6f33f47b7469acbc8c7d/releases/627c702d0b72b129ff9d3e65/img/st-engineering-web-eng-rgb-1@1x.png" alt="ST Engineering" />
        </div>

        <div className='main-login-pic'>

        </div>


        <div>
          <h2>Login to Your Account</h2>
          <h3>Welcome to the PSD MMS, sign in to Continue</h3>
        </div>


        <div className='input-lines'>
          <Input placeholder="E-mail" className='accountAndPsw' size={size} />
          <Input.Password placeholder="password" className='accountAndPsw' size={size} />

        </div>

        <div className='remember-line'>

          <div className='remember-line-left  w05'>
            <div className='rememberMe'>   <input type="checkbox" /> Remember me</div>
            <div><Button className='loginBtn' size={size} onClick={loginHandle}>LOGIN</Button></div>
          </div>

          <div className='remember-line-right w05'>
            <div className='forget'> Forget Password?</div>
            <div><Button className='signBtn' size={size}>SIGNUP</Button></div>
          </div>
        </div>


        <div className='language-box'>
          <Select defaultValue="english" style={{ width: 120 }} size={size} onChange={handleChange} >
            <Option value="chinese">中文</Option>
            <Option value="english">Englisn</Option>

          </Select>
        </div>
      </div>


    </div>
  );





}